
<template>
  <div id="detail">
    <detail-nav-bar style="position:sticky" @titleClick="titleClick" ref="nav"></detail-nav-bar>
<!--    <div v-for="item in $store.state.carList[0]">{{item}}aa</div>-->
    <scroll ref="scroll" class="content" @scroll="contentScroll">

      <detail-swiper :top-images="topImages"></detail-swiper>
      <detail-base-info :goods-info="goodsInfo"></detail-base-info>
      <detail-shop-info :shop="shop"></detail-shop-info>
      <detail-goods-info :detail-info="detailInfo" @detailImageLoad="detailImageLoad"></detail-goods-info>
      <detail-param-info ref="param" :param-info="paramInfo"></detail-param-info>
      <detail-comment-info ref="comment" :comment-info="commentInfo"></detail-comment-info>
      <goods-list ref="recommends" :goods="Recommends"></goods-list>
    </scroll>
    <detail-bottom-bar  @addCart="addCart">我是你爹</detail-bottom-bar>

  </div>
</template>

<script>
  import DetailNavBar from "./childsComps/DetailNavBar";
  // import Scroll from "../../components/common/scroll/Scroll";

  import {getDetail, GoodsInfo, Shop, GoodsParam, getRecommend} from "../../network/detail";
  import DetailSwiper from "./childsComps/DetailSwiper";
  import DetailBaseInfo from "./childsComps/DetailBaseInfo";
  import DetailShopInfo from "./childsComps/DetailShopInfo";
  import Scroll from "../../components/common/scroll/Scroll";
  import DetailGoodsInfo from "./childsComps/DetailGoodsInfo";
  import DetailParamInfo from "./childsComps/DetailParamInfo";
  import DetailCommentInfo from "./childsComps/DetailCommentInfo";
  import GoodsList from "../../components/content/goods/GoodList";
  import {debounce} from "../../common/uni";
  import {itemListenerMixin} from "../../common/mixin";
  import DetailBottomBar from "./childsComps/DetailBottomBar";

  export default {
    name: "Detail",
    components: {
      DetailBottomBar,
      GoodsList,
      DetailCommentInfo,
      DetailParamInfo, DetailGoodsInfo, Scroll, DetailShopInfo, DetailBaseInfo, DetailSwiper, DetailNavBar
    },
    data() {
      return {
        iid: null,
        topImages: [],
        goodsInfo: {},
        shop: {},
        detailInfo: {},
        paramInfo: {},
        commentInfo: {},
        Recommends: [],
        themeTops: [],
        currentIndex: []
      }
    },
    mixins: [itemListenerMixin],
    mounted() {
    },
    destroyed() {
      this.$bus.$on('itemImageLoad', this.itemImgListener)
    },
    updated() {

    },
    created() {


      this.iid = this.$route.params.iid
      getDetail(this.iid).then(res => {
        // console.log(res)
        const data = res.result
        this.topImages = data.itemInfo.topImages

        this.goodsInfo = new GoodsInfo(data.itemInfo, data.columns, data.shopInfo.services)
        // console.log(this.goodsInfo)
        this.shop = new Shop(data.shopInfo)
        this.detailInfo = data.detailInfo
        this.paramInfo = new GoodsParam(data.itemParams.info, data.itemParams.rule)
        if (data.rate.cRate !== 0) {
          this.commentInfo = data.rate.list[0]
        }

        // this.$nextTick(()=>{
        //
        //   this.themeTops.push(0)
        //   this.themeTops.push(this.$refs.param.$el.offsetTop-44)
        //   this.themeTops.push(this.$refs.comment.$el.offsetTop-44)
        //   this.themeTops.push(this.$refs.recommends.$el.offsetTop-44)
        //   console.log(this.themeTops)
        // })
        // this

      })

      getRecommend().then(res => {
        // console.log(res.data)
        this.Recommends = res.data.list
      })

    },
    methods: {
      titleClick(index) {
        this.$refs.scroll.scrollTo(0, -this.themeTops[index], 200)
      },

      contentScroll(position) {
        const positiony = -position.y
        for (let i = 0; i < this.themeTops.length-1; i++) {
          if (this.currentIndex !== i && (this.themeTops[i] <= positiony && positiony < this.themeTops[i + 1])) {
            this.currentIndex = i
            this.$refs.nav.cindex = this.currentIndex
          }
        }

      },

      detailImageLoad() {

        this.themeTops.push(0)
        this.themeTops.push(this.$refs.param.$el.offsetTop - 44)
        this.themeTops.push(this.$refs.comment.$el.offsetTop - 44)
        this.themeTops.push(this.$refs.recommends.$el.offsetTop - 44)
        this.themeTops.push(Number.MAX_VALUE)
        // console.log(this.themeTops)
      },

      addCart(){
        const product = {}
        product.image = this.topImages[0]
        product.title = this.goodsInfo.title
        product.desc = this.goodsInfo.desc
        product.price = this.goodsInfo.realPrice
        product.iid = this.iid
        product.count = 0
        this.$store.dispatch('addCart',product).then(res=>{
          this.$toast.show(res,500)
          // console.log(this.$toast);
        })
        // this.$store.commit('addCart',product)
      }
    }
  }
</script>

<style scoped>
  #detail {
    position: relative;
    z-index: 88;
    background-color: white;
    height: 100vh;
  }

  .content {
    height: calc(100% - 44px);
    overflow: hidden;
  }

</style>